import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    ScrollView,
    TouchableOpacity,
    Platform,
    InteractionManager,
    Navigator
} from 'react-native';

var NavigatorBar = require('../Main/NXNavigationBar'); //NavigationBar
var Swiper = require('react-native-swiper')//轮播组件
import MessageCell from '../Home/MessageCell'
import OnlineCell from '../Home/OnlineCell'
var IconCell = require('../Home/IconCell');//IconCell导入
import Constants from '../common/constants';
import ImageEquallyEnlarge from '../common/ImageEquallyEnlarge';
// import NewMusic from ''
var NewMusic = require('../Home/NewMusic');
var cardDataOne = [{
    imgurl: '1.png',
    maintitle: '古风',
    imgurlandroid: 'jijiu'

}, {
    imgurl: '2.png',
    maintitle: '民谣',
    imgurlandroid: 'money_icon'

}, {
    imgurl: '3.png',
    maintitle: '摇滚',
    imgurlandroid: 'news'

},

];
var cardDataTow = [{
    imgurl: '4.png',
    maintitle: '流行',
    imgurlandroid: 'jijiu'

}, {
    imgurl: '5.png',
    maintitle: '动漫',
    imgurlandroid: 'money_icon'

}, {
    imgurl: '6.png',
    maintitle: '影视',
    imgurlandroid: 'news'

},

];
var cardDataOnline = [{
    imgurl: '4.png',
    maintitle: '在线',
    imgurlandroid: 'jijiu'

}, {
    imgurl: '5.png',
    maintitle: '著名',
    imgurlandroid: 'money_icon'

}, {
    imgurl: '6.png',
    maintitle: '特辑',
    imgurlandroid: 'news'

},
 {
    imgurl: '5.png',
    maintitle: '音乐',
    imgurlandroid: 'money_icon'

}, {
    imgurl: '6.png',
    maintitle: '人',
    imgurlandroid: 'news'

},

];
export default class Home extends Component {

    leftAction(){
        InteractionManager.runAfterInteractions(() => {
            this.props.navigator.pop({
                
            });
           }); 

    }

    selectCellAction() {

        InteractionManager.runAfterInteractions(() => {
            this.props.navigator.push({
                component: NewMusic,
            });
           }); 
    }
    onSelect1 () {
        InteractionManager.runAfterInteractions(() => {
            this.props.navigator.push({
                component: NewMusic,
            });
           }); 

    }


    render() {
        return (
            <View style={styles.container}>
                 <NavigatorBar title='资讯' widthWH={Platform.OS == 'ios' ? 15 : 15} leftBtnName='back' rightBtnName='Share_icon' leftpress={() => this.leftAction()} rightPress={() => this.rightAction()} />
                <ScrollView style={styles.sr}
                    showsVerticalScrollIndicator={false}
                >

                    {/**顶部轮播图 */}
                    <Swiper style={styles.wrapperTop}
                        showsButtons={false}

                        removeClippedSubviews={false}
                        autoplay={true}
                        height={130}
                        paginationStyle={{
                            bottom: Platform.OS === 'ios' ? 18 : 15, left: null, right: 10,
                        }}
                    >
                        <View style={styles.slide1}>
                            <Text style={styles.text}>Hello Swiper</Text>
                        </View>
                        <View style={styles.slide2}>
                            <Text style={styles.text}>Beautiful</Text>
                        </View>
                        <View style={styles.slide3}>
                            <Text style={styles.text}>And simple</Text>
                        </View>
                    </Swiper>

                    {/**最新音乐 */}
                    <View style={{ marginTop: 5, marginLeft: 10 }}>
                        <Text style={{ marginBottom: 5 }}>
                            最新音乐
                    </Text>
                        < MessageCell selectCellAction = {() => this.selectCellAction()}/>
                    </View>
                    {/**热歌单 */}
                    <View style={{ marginTop: 5, marginLeft: 10 }}>
                        <Text style={{ marginBottom: 5 }}>
                            热歌单
                    </Text>
                        <IconCell imageData={cardDataOne} />
                        <IconCell imageData={cardDataTow} />

                    </View>
                    {/**在线音乐人 imageData={cardDataOnline}*/}
                    <View style={{ marginTop: 5, marginLeft: 10 }}>
                        <Text style={{ marginBottom: 5 }}>
                            在线音乐人
                    </Text>
                        <OnlineCell onSelect1={() => this.onSelect1() }imageData={cardDataOnline}/>
                    </View>

                    {/**音乐专题 */}
                    <View style={{ marginTop: 5, marginLeft: 10 }}>
                        <Text style={{ marginBottom: 5 }}>
                            音乐专题
                    </Text>
                        <Image style={styles.image_left1} source={{ uri: 'http://imgsrc.baidu.com/forum/pic/item/a7dda144ad345982e3113c9e0ef431adcbef8427.jpg' }}></Image>
                        <Image style={styles.image_left1} source={{ uri: 'http://imgsrc.baidu.com/forum/pic/item/9d345982b2b7d0a25f52dd91c9ef76094b369a27.jpg' }}></Image>
                        <Image style={styles.image_left1} source={{ uri: 'http://imgsrc.baidu.com/forum/pic/item/82b7d0a20cf431ad9e499a354936acaf2edd9827.jpg' }}></Image>
                        <Image style={styles.image_left1} source={{ uri: 'http://imgsrc.baidu.com/forum/pic/item/3cd7912397dda144e31bb4beb0b7d0a20cf486a8.jpg' }}></Image>
                        <Image style={styles.image_left1} source={{ uri: 'http://imgsrc.baidu.com/forum/pic/item/9144ad345982b2b7818de1c833adcbef76099ba8.jpg' }}></Image>

                
                    </View>
                </ScrollView>
            </View>
        );
    }

};


var styles = StyleSheet.create({
    container: {
        flex: 1,
        // backgroundColor: '#F5FCFF',
        backgroundColor: 'white',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    hodsong: {
        flexDirection: 'row',
        flex: 1,
        backgroundColor: 'red',
        height: 200,


    },
    image_left: {
        height: 80,
        width: 80,
        // marginTop: 10,
        // marginBottom: 10,
        // marginLeft: 10,
        // marginRight: 10,
    },
    image_left1: {
        height: 80,
        width: Constants.window.width-40,
        marginTop: 10,
        // marginBottom: 10,
        marginLeft: 10,
        marginRight: 10,
        resizeMode:'stretch',
    },
});

module.exports = Home;